<template>
	<view class="wrap">
		<form @submit="submit">
			<view class="top">
				<view class="item">
					<view class="left">会员昵称</view>
					<input type="text" placeholder-class="line" placeholder="请填写会员昵称" name="nickname"
						v-model="nickname" />
				</view>
				<view class="item">
					<view class="left">会员头像</view>
					<u-upload ref="uUpload" name="avatarurl" :fileList="oldAvatarUrl" max-count="1" :action="action"
						upload-text="上传头像" :auto-upload="false" @on-success="uploadsuccess" @on-error="uploaderror"
						@on-choose-complete="chooseimg" :form-data="formData" :header="header"></u-upload>
				</view>
				<view class="item">
					<view class="left">会员性别</view>
					<view class="right">
						<u-radio-group v-model="sex" @change="radioGroupChange" active-color="orange">
							<u-radio v-for="(item, index) in sexlist" :key="index" :name="item.value">
								{{item.name}}
							</u-radio>
						</u-radio-group>
					</view>
				</view>
				<view class="item" @tap="showBirthdayPicker">
					<view class="left">会员生日</view>
					<input disabled type="text" placeholder-class="line" placeholder="2021-01-24" name="birthday"
						v-model="birthday" />
				</view>
				<view class="item" @click="regionVisible=true">
					<view class="left">所在地址</view>
					<input disabled type="text" placeholder-class="line" placeholder="省市区县、乡镇等" name="region"
						v-model="region" />
				</view>
			</view>
			<regionPicker :visible.sync="regionVisible" mode="region" default-type="value" :hide-area="false"
				@confirm="onConfirm($event,'region')" ref="region"></regionPicker>
			<u-picker mode="time" ref="uPicker" v-model="birthdayShow" @confirm="birthdayConfirm" />
			<button form-type="submit" type="warn" @>保存并使用</button>
			<button form-type="reset">重置</button>
		</form>
	</view>
</template>

<script>
	import {
		getuserinfo,
		infoedit
	} from "@/api/api.js"
	// 引入地区模块
	import regionPicker from "@/components/region/w-picker.vue";
	export default {
		components: {
			regionPicker
		},
		data() {
			return {
				id: '', //初始化修改数据id
				// 头像提交服务端地址
				action: this.$baseUrl + `/api/infoedit`,
				// 需要展示的图片列表比如展示需要编辑的用户头像
				oldAvatarUrl: [],
				// 表单数据(不含头像信息)
				formData: {},
				// 初始化header头
				header: {},
				oldImg: '', //初始化旧图片
				regionVisible: false, //初始化地区选择器开关
				nickname: '鲁班', //初始化收件人姓名
				region: '北京市市辖区朝阳区', //初始化地区默认值
				birthday: '1992-02-14',
				birthdayShow: false,
				sexlist: [{
						value: 1,
						name: '男'
					},
					{
						value: 2,
						name: '女'
					},
				],
				sex: 1 //初始化会员性别
			}
		},

		onLoad() {
			this.getuserInfo(1)
		},

		methods: {
			// 获取用户信息
			getuserInfo(type) {
				const {
					uid,token
				} = uni.getStorageSync("userinof")
				
				getuserinfo({
					uid
				}).then(res => {
					 if (res.data.code === 200) {
						
						 if(type==2){
							 res.data.list[0].token = token
							 
							uni.setStorageSync('userinof',res.data.list[0]) //更新本地缓存
							setTimeout(() => {
							
								uni.switchTab({
									url: '/pages/user/user'
								})
							
							
							}, 2000)
							
							
						 } else if(type==1){
						 	console.log(res);
						 	const userInfo = res.data.list[0]
						 	// 用户名字
						 	this.nickname = userInfo.nickname
						 	// 日期 
						 	this.birthday = userInfo.birthday
						 	// id 
						 	this.id = userInfo.id
						 	// 性别
						 	this.sex = userInfo.sex
						 	// 地区
						 	this.region = userInfo.region
						 	// 图片地址 
						 	this.oldAvatarUrl = [{
						 		url: this.$baseUrl + userInfo.avatarurl
						 	}]
						 	
						 }
						 
						

					} else {
						uni.showToast({
							title: '请重新登录'
						})
						setTimeout((
							uni.navigateTo({
								url: '/pages/textlogin/textlogin'
							})

						), 2000)

					}
				})
			},
			// 修改  
			submit(e) {
				const {
					token
				} = uni.getStorageSync('userinof')
				
				let {
					birthday,
					nickname,
					region
				} = e.detail.value
				let {
					sex,
					id
				} = this
				this.header = {
					authorization: token
				}

				this.formData = {
					id,
					sex,
					birthday,
					nickname,
					region
				}
				let file = this.$refs.uUpload.lists[0].file || null

				if (file == null) {
					let data = this.formData
					infoedit(data).then(res => {

						if (res.data.code == 200) {
							uni.showToast({
								title: '修改成功'

							})
					this.getuserInfo(2)
						


						}
					})
				} else {

					setTimeout(() => {
						this.$refs.uUpload.upload()
					}, 50)

				}


				// console.log(birthday,nickname,region);

			},



			// 选择会员地区
			onConfirm(res) {
				console.log(res);
				this.region = res.result
			},
			// 监听本地选择图片
			chooseimg(lists, name) {},
			// 性别标签切换
			radioGroupChange(e) {},

			// 地址默认设置开关
			setDefault(e) {},

			// 开始生日选择器
			showBirthdayPicker() {
				this.birthdayShow = true;
			},
			// 监听时期选择器
			birthdayConfirm(e) {
				this.birthday = e.year + '-' + e.month + '-' + e.day
			},

			// 图片上传成功触发
			uploadsuccess(data, index, lists, name) {
				if (data.code == 200) {
					uni.showToast({
						title: '修改成功'
					})
					this.getuserInfo(2)
				}
			},
			// 图片上传失败触发
			uploaderror(res, index, lists, name) {},

		}
	}
</script>

<style lang="scss" scoped>
	// 引入样式
	@import '@/static/css/userinfo.scss';
</style>